
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MicroHeroes</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="_CSS/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      /* Override some defaults */
      html, body {
        background-color: #eee;
      }
      body {
        padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
      }
      .container > footer p {
        text-align: center; /* center align it with the container */
      }
      .container {
        width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
      }

      /* The white background content wrapper */
      .content {
        background-color: #fff;
        padding: 20px;
        margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
        -webkit-border-radius: 0 0 6px 6px;
           -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
      }

      /* Page header tweaks */
      .page-header {
        background-color: #f5f5f5;
        padding: 20px 20px 10px;
        margin: -20px -20px 20px;
      }

      /* Styles you shouldn't keep as they are for displaying this base example only */
      .content .span10,
      .content .span4 {
        min-height: 500px;
      }
      /* Give a quick and non-cross-browser friendly divider */
      .content .span4 {
        margin-left: 0;
        padding-left: 19px;
        border-left: 1px solid #eee;
      }

      .topbar .btn {
        border: 0;
      }

    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
    
    
    
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
      
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
      
      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Twitter', 3433],
        ['Facebook', 2344],
        ['Linkedin', 234], 
        ['SMS', 23],
        ['Others', 1242]
      ]);

      // Set chart options
      var options = {'title':'Engagement Distribution',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('channel_piechart_div'));
      chart.draw(data, options);
    }
    </script>
    
    
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Month');
        data.addColumn('number', 'Activities');
        data.addColumn('number', 'Donation');
        data.addRows(4);
        data.setValue(0, 0, '06-11');
        data.setValue(0, 1, 232);
        data.setValue(0, 2, 330);
        data.setValue(1, 0, '07-11');
        data.setValue(1, 1, 452);
        data.setValue(1, 2, 370);
        data.setValue(2, 0, '08-11');
        data.setValue(2, 1, 850);
        data.setValue(2, 2, 580);
        data.setValue(3, 0, '09-11');
        data.setValue(3, 1, 1230);
        data.setValue(3, 2, 650);

        var chart = new google.visualization.LineChart(document.getElementById('performance_linechart_div'));
        chart.draw(data, {width: 400, height: 300, title: 'Campaign Performance'});
      }
    </script>

    
    
  </head>

  <body>

    <div class="topbar">
      <div class="fill">
        <div class="container">
          <a class="brand" href="#">MicroHeroes</a>
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
          <p class="pull-right">Logged in as <a href="#">username</a></p>
        </div>
      </div>
    </div>

    <div class="container">

      <div class="content">
        <div class="page-header">
        

        
            <div class="span1">
                <img class="thumbnail" src="http://placehold.it/30x30" alt="">
            </div>
            <div>
                <h1>Singapore Airlines <small>Corporate Dashboard</small></h1>
            </div>
        </div>
        

        <div class="row">

            
            
          

          <div class="span10">
            <h2>Singapore Airlines <span class="label notice">EDIT PROFILE</span></h2>

            
            <div class="span9">
                <div class="row">
                    <div class="span2">
                        <img class="thumbnail" width="90" src="http://travelntourworld.files.wordpress.com/2011/07/edited-1boeing-777.jpg" alt="">
                        <p>
                            <blockquote>
                                <p>We are good</p>
                                <small>Mr X, CEO</small>
                            </blockquote>
                            
                        </p>
                    </div>
                    
                    <div class="span7">
                    
                        <div class="row">
                        

                            
                            <div class="span6">
                                <div id="performance_linechart_div"></div>
                                
            
                                <div id="channel_piechart_div"></div>

                            </div>
                                   
                            <div class="span2">
                                <h4>ONGOING</h4>
                                <h1>15</h1>
                            </div>
                            
                            <div class="span2">
                                <h4>COMPLETED</h4>
                                <h1>34062</h1>
                            </div>

                            <div class="span2">
                                <h4>$RAISED</h4>
                                <h1>$93485</h1>
                            </div>                                   
                        </div>
                        
                        
                        
                    </div>
                </div>
            </div>

            
            <div class="span9">
                <h3>Your Sponsored Activities <small><a href="#">more...</a></small></h3>
                <div class="row">
                    <div class="span7">
                        <h4>Tweet this Hunger Awareness Message <span class="label important">HOT</span></h4>
                        <p>343 Micro Heroes have done this <a href="#">More</a> <br/><small>1 days ago</small>
                        </p>
                    </div>
                    <div >
                        <button class="btn primary">Edit</button>
                    </div>
                </div>
                
                <div class="row">
                    <div class="span7">
                        <h4>Post this Hunger Awareness Message </h4>
                        <p>145 Micro Heroes have done this <a href="#">Read More</a> <br/><small>3 days ago</small>
                        </p>
                    </div>
                    <div >
                        <button class="btn primary">Edit</button>
                    </div>
                </div> 

                <div class="row">
                    <div class="span7">
                        <h4>Greet Our Crew <span class="label notice">PROMOTED</span> </h4>
                        <p>43 Micro Heroes have done this <a href="#">Read More</a> <br/><small>5 days ago</small>
                        </p>
                    </div>
                    <div >
                        <button class="btn primary">Edit</button>
                    </div>
                </div>                 


            </div>
           
          </div>
          
            <div class="span4">
                <div class="sidebar">
                
                

                    <div class="well"> 
                    
                        
                        <h5>Activities</h5>
                        <ul>
                            <li><a href="#">Top Activities</a></li>
                            <li><a href="#">Current Activities</a></li>
                            <li><a href="#">Past Activities</a></li>
                        </ul>

                        <h5>Top Companies</h5>
                        <ul>
                            <li>GOOG <img class="thumbnail" src="http://placehold.it/10x10" alt=""> 23 <img class="thumbnail" src="http://placehold.it/10x10" alt="">  $5332343</li>
                            <li>SIA <img class="thumbnail" src="http://placehold.it/10x10" alt=""> 20 <img class="thumbnail" src="http://placehold.it/10x10" alt="">  $62346</li>                            
                            <li>MSTF <img class="thumbnail" src="http://placehold.it/10x10" alt=""> 19 <img class="thumbnail" src="http://placehold.it/10x10" alt="">  $13545</li>
                            <li>CITI <img class="thumbnail" src="http://placehold.it/10x10" alt=""> 33 <img class="thumbnail" src="http://placehold.it/10x10" alt="">  $534</li>
                            
                        </ul>
                        
                        <h5>Settings</h5>
                        <ul>
                            <li><a href="#">Settings</a></li>
                            <li><a href="#">Log out</a></li>
                        </ul>
                    </div>                
                

                </div>

            </div>
                  
          
        </div>
      </div>

      <footer>
        <p>MicroHeroes&copy; Company 2011</p>
      </footer>

    </div> <!-- /container -->

  </body>
</html>
